<html>
	<head>
		<script type="text/javascript">
		
			// Global stuff
			var canvas;
			var context;
			var colors = {1:"000000", 2:"369211", 3:"2A10E9"};
		
			function draw ()
			{
				// Get the canvas element and its drawing context
				canvas = document.getElementById('board');
				context = canvas.getContext('2d');
				
				// set the style
				setStyle();
            
				// Stroke the line onto the canvas
				context.stroke();
				
				// State objects
				var startX;
				var startY;
				var mouseState = 0;
				
            // Place the pen on the canvas (i.e., start drawing)
				canvas.onmousedown = function (e) {
					context.moveTo(e.clientX, e.clientY);
					mouseState = 1;
					document.body.style.cursor="default";
					context.beginPath();
					return false;
				}
				
            // Lift the pen from the canvas (i.e., stop drawing)
				canvas.onmouseup = function (e) {
					document.body.style.cursor = 'default';
					mouseState = 0;
					context.closePath();
				}
				
            // Draws on the canvas
				canvas.onmousemove = function (e) {
					if (mouseState == 1){
						document.body.style.cursor = 'default';
						drawLine(context, e.clientX, e.clientY);
					}
				}
				
			}
			
			function clearCanvas() {
					canvas.width = canvas.width;
					// Use the identity matrix while clearing the canvas
					//context.clearRect(0,0,canvas.width,canvas.height);
					//context.setTransform(1, 0, 0, 1, 0, 0);
					context.clearRect(0, 0, canvas.width, canvas.height);
					context.restore();
					setStyle();
			}
			
			function setStyle() {
				// Give the stroke some style
				context.lineWidth = 5;
				context.lineJoin = 'round';
				context.strokeStyle = 'blue';
				context.lineCap = 'round';
				
				// Save the style
				context.save();
			}
			
			function setStrokeSize(val) {
				context.lineWidth = val;
			}
			
			function setStrokeColor(val) {
				if (val == 1) { context.strokeStyle = 'black'; }
				else if (val == 2) { context.strokeStyle = 'blue'; }
				else if (val == 3) { context.strokeStyle = 'red'; }
				else { context.strokeStyle = 'white'; }
				context.save();
			}
			
			
			// Draw using a line
			function drawLine(context, x,y){
				context.lineTo(x-10,y-10);
				context.stroke();
			}
			
			// Draw using an arc
			function drawArc(x,y){
				context.arc(x-10, y-10, 2, 0, 2*Math.PI);
				context.stroke();
			}
			
			function updateInfo(x, y){
				var text = document.getElementById("info");
				text.innerHTML = x + " " + y;
			}
			
			// Event listener for when page loads
			window.addEventListener("load", draw, true);
			
			
		</script>
	</head>
	<body>
		<canvas id="board" height="500" width="500" style="border: 1px solid;" >
		</canvas>
		<div id="info">
		
		</div>
		<div>
			<button type="button" onclick="clearCanvas()";>Clear</button>
		</div>
		<div id="controls">
			Stroke size: <input type="range" name="stroke_size" min="1" max="9" step = "2" value="4" onchange="setStrokeSize(value);" />
			Stroke color: <input type="range" name="stroke_color" min="1" max="4" value="2" onchange="setStrokeColor(value);" />
		</div>
	</body>
</html>